<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>机构查询 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css?t=a1">
   <style>
      .el-header {
         background-color: #B3C0D1;
         color: #333;
         line-height: 60px;
      }

      .el-aside {
         color: #333;
      }

      html,
      body,
      #app,
      .el-container {
         padding: 0px;
         margin: 0px;
         height: 100%;
      }

      .my-layout-admin {
         position: fixed;
         top: 46px;
         left: 400px;
         right: 0px;
         bottom: 0px;
      }

      .mydmin-iframe {
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
      }

      /* 菜单后面小三角的图标颜色 */
      .el-submenu__title i {
         color: #eee;
      }

      .el-tree-node__expand-icon.is-leaf {
         color: #c0c4cc;
         cursor: default;
         transform: rotate(90deg);
      }
   </style>
</head>

<body>
   <div id="app">

      <el-container style="height: 100%; border: 0px solid #eee;">
         <el-aside width="400px" style="background-color: #eee;border-right: 1px solid #ddd;">
            <div>
               <el-input placeholder="可选搜索内容" v-model="filterText" size="small">
                  <template slot="prepend">机构名称:</template>
               </el-input>
               <div style="margin-top: 5px;overflow-y:auto;" :style="{height:treeHeight + 'px'}">
                  <el-tree ref="orgTreeRef" v-loading="tableLoading" :data="orgTreeData" :props="defaultProps"
                     default-expand-all show-checkbox highlight-current node-key="id" :filter-node-method="filterNode">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }} </span>
                     </span>
                  </el-tree>
               </div>
            </div>
         </el-aside>

         <el-container>
            <el-main style="padding: 3px;">
               <el-tabs v-model="tabsValue" type="card">
                  <el-tab-pane :key="item.name" v-for="(item, index) in tabsData" :label="item.title" :name="item.name"
                     :closable="item.close">

                     <div class="my-layout-admin">
                        <iframe :src="item.content" frameborder="0" class="mydmin-iframe"></iframe>
                     </div>

                  </el-tab-pane>
               </el-tabs>
            </el-main>
         </el-container>
      </el-container>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/my_util.js"></script>

<script>

   var marginHeight = 150; // 高差数


   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            treeHeight: window.innerHeight - marginHeight,                 // tree高，当窗口改变大小的时候通过 pageResize 修改该值
            tableLoading: false,       // 显示加载中
            orgTreeData: [],           // 机构树形数据  
            filterText: '',
            tabsValue: 'statistics',          // tab默认打开的页面 

            // tree 控件配置
            defaultProps: {
               children: 'children',
               label: 'name',
               isLeaf: 'leaf',
            },

            // tab 数据
            tabsData: [{
               title: '学习统计',
               name: 'statistics',
               close: false,
               content: '/view/admin/organ/iframe_statistics.html?t=' + uuid()
            },
            {
               title: '未通过人员名单',
               name: 'fail',
               close: false,
               content: '/view/admin/organ/iframe_fail.html?t=' + uuid()
            },
            {
               title: '已通过人员名单',
               name: 'success',
               close: false,
               content: '/view/admin/organ/iframe_success.html?t=' + uuid()
            },
            {
               title: '停课人员名单',
               name: 'suspension',
               close: false,
               content: '/view/admin/organ/iframe_suspension.html?t=' + uuid()
            },
            {
               title: '上线人员名单',
               name: 'online',
               close: false,
               content: '/view/admin/organ/iframe_online.html?t=' + uuid()
            }],

         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      computed: {
      },
      watch: {
         // 监控文本变化
         filterText(val) {
            this.$refs.orgTreeRef.filter(val);
         }
      },
      methods: {
         // 改变高度
         pageResize() {
            this.treeHeight = window.innerHeight - marginHeight;
         },

         // 过滤
         filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
         },
      },
   });

   // 提供给子页面调用的方法。
   // 返回勾选项ID列表
   function getCheckedKeysToCallback() {
      return vm.$refs.orgTreeRef.getCheckedKeys();
   }

   // 读取当前管理员权限允许的树形数据列表
   function loadSysOrganDataBySessionMember() {
      // 获取组织机构数据
      vm.tableLoading = true;
      axios.get('/admin/organ/show/sys_organ!member_pid.bu')
         .then(function (response) {
            console.log(response.data);
            if (response.data.code > 0) {
               vm.orgTreeData = response.data.bundle;

               vm.showSearchTree = false;              // 显示正常tree 
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
            vm.tableLoading = false;
         })
         .catch(function (error) {
            vm.tableLoading = false;
            vm.$message.error('获取数据失败！' + error);
         });
   }

   // 初始化系统参数，管理员信息等
   function loadInitData() {

      // 读取参数信息至缓存
      axios.get('/admin/sys/get_option_params.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
         })

   };


   loadInitData();                     // 初始化系统参数，管理员信息等
   loadSysOrganDataBySessionMember();  // 读取当前管理员权限允许的树形数据列表

</script>

</html>